<template>
	<view class="goodsinfo">
		<u-navbar class="navbar_top" :title-size="28" :border-bottom="false" :back-icon-size="48" back-icon-color="#ffffff"
		 :back-text-style="{ color: '#000000', fontSize: '26rpx' }" title-color="#000000" :background="{ background: 'transparent' }"
		 :custom-back="goback"></u-navbar>
		<view class="goodsmain">
			<view class="swiper_top">
				<swiper class="swiper" :current="current" :indicator-dots="false" :autoplay="autoplay" :interval="interval"
				 :duration="duration" @change="swiperchange">
					<swiper-item class="swiper_item" v-for="(item, index) in swiperList" :key="index">
						<u-image width="100%" height="712rpx" :src="item.url"></u-image>
					</swiper-item>
				</swiper>
				<view class="dots">
					<u-tag :text="tagtext" shape="circle" class="u-p-l-30 u-p-r-40" color="#FFFFFF" bg-color="#00000070" />
				</view>
			</view>
			<u-gap height="18" bg-color="#F8F8F8"></u-gap>
			<view class="goods_info">
				<view class="coupon u-flex u-row-around u-col-center">
					<view class="coupon_left">
						￥
						<text style="font-size: 60rpx;">{{ someitem.priceInfo.lowestCouponPrice }}</text>
						<text class="u-margin-left-10" style="text-decoration:line-through;color: #BFBFBF;">￥{{ someitem.priceInfo.price }}</text>
					</view>
					<view class="coupon_right u-flex">
						<view class="u-p-l-20 u-p-r-20" style="padding: 10rpx 0;">返</view>
						<view class="u-p-10" style="background-color:rgba(255, 255, 255, 0.76);color: #FF4D4F;">￥{{ someitem.commissionInfo.couponCommission }}</view>
					</view>
				</view>
				<view class="goods_title u-line-3">{{ someitem.skuName }}</view>
				<view class="tprice">
					<text>{{ someitem.comments }} 评论</text>
					<text class="u-p-l-10">· {{ someitem.goodCommentsShare }}% 好评</text>
					<text class="u-p-l-10" v-for="(s, k) in someitem.skuLabelInfo.fxgServiceList" :key="k">· {{ s.serviceName }}</text>
				</view>
				<view class="couponinfo u-flex u-row-between u-col-center" v-if="someitem.couponInfo && someitem.couponInfo.couponList.length > 0">
					<view class="cou_left">
						<view class="title">{{ someitem.couponInfo.couponList[0].discount }}元优惠券</view>
						<view class="timer">
							使用期限：{{ $u.timeFormat(someitem.couponInfo.couponList[0].getStartTime, 'yyyy-mm-dd') }} -
							{{ $u.timeFormat(someitem.couponInfo.couponList[0].getEndTime, 'yyyy-mm-dd') }}
						</view>
					</view>
					<view class="bevel">
						<view class="round r1"></view>
						<u-line style="flex: none;" color="#F8F8F9" direction="col" :hair-line="false" border-style="dashed"></u-line>
						<view class="round r2"></view>
					</view>
					<view class="cou_right">
						<view class="btnround" @click="golink">立即领取</view>
					</view>
				</view>
				<view class="shopinfo">
					<view class="u-flex u-row-left u-col-center">
						<text class="iconfont icon-shop" style="font-size: 40rpx;color: #FF4D4F;margin-right: 14rpx;"></text>
						<text class="title">{{ someitem.shopInfo.shopName }}</text>
					</view>
					<view class="shop_bot u-flex u-row-left u-col-center" v-if="someitem.shopInfo.commentFactorScoreRankGrade">
						<view class="infos">
							<text class="u-p-r-10">评价</text>
							<text class="u-p-r-10" :style="{
									color:
										someitem.shopInfo.commentFactorScoreRankGrade === '高'
											? '#FF4D4F'
											: someitem.shopInfo.commentFactorScoreRankGrade === '中'
											? '#AD8B00'
											: '#36CFC9'
								}">
								{{ someitem.shopInfo.userEvaluateScore }}
							</text>
							<text :style="{
									fontSize: '12px',
									padding: '0 2px',
									borderRadius: '2px',
									backgroundColor:
										someitem.shopInfo.commentFactorScoreRankGrade === '高'
											? '#FCCCCC'
											: someitem.shopInfo.commentFactorScoreRankGrade === '中'
											? '#DACB8F'
											: '#B5F5EC',
									color:
										someitem.shopInfo.commentFactorScoreRankGrade === '高'
											? '#FF4D4F'
											: someitem.shopInfo.commentFactorScoreRankGrade === '中'
											? '#AD8B00'
											: '#36CFC9'
								}">
								{{ someitem.shopInfo.commentFactorScoreRankGrade }}
							</text>
						</view>
						<view class="infos">
							<text class="u-p-r-10">物流</text>
							<text class="u-p-r-10" :style="{
									color:
										someitem.shopInfo.logisticsFactorScoreRankGrade === '高'
											? '#FF4D4F'
											: someitem.shopInfo.logisticsFactorScoreRankGrade === '中'
											? '#AD8B00'
											: '#36CFC9'
								}">
								{{ someitem.shopInfo.logisticsLvyueScore }}
							</text>
							<text :style="{
									fontSize: '12px',
									padding: '0 2px',
									borderRadius: '2px',
									backgroundColor:
										someitem.shopInfo.logisticsFactorScoreRankGrade === '高'
											? '#FCCCCC'
											: someitem.shopInfo.logisticsFactorScoreRankGrade === '中'
											? '#DACB8F'
											: '#B5F5EC',
									color:
										someitem.shopInfo.logisticsFactorScoreRankGrade === '高'
											? '#FF4D4F'
											: someitem.shopInfo.logisticsFactorScoreRankGrade === '中'
											? '#AD8B00'
											: '#36CFC9'
								}">
								{{ someitem.shopInfo.logisticsFactorScoreRankGrade }}
							</text>
						</view>
						<view class="infos">
							<text class="u-p-r-10">售后</text>
							<text class="u-p-r-10" :style="{
									color:
										someitem.shopInfo.afsFactorScoreRankGrade === '高' ? '#FF4D4F' : someitem.shopInfo.afsFactorScoreRankGrade === '中' ? '#AD8B00' : '#36CFC9'
								}">
								{{ someitem.shopInfo.afterServiceScore }}
							</text>
							<text :style="{
									fontSize: '12px',
									padding: '0 2px',
									borderRadius: '2px',
									backgroundColor:
										someitem.shopInfo.afsFactorScoreRankGrade === '高' ? '#FCCCCC' : someitem.shopInfo.afsFactorScoreRankGrade === '中' ? '#DACB8F' : '#B5F5EC',
									color:
										someitem.shopInfo.afsFactorScoreRankGrade === '高' ? '#FF4D4F' : someitem.shopInfo.afsFactorScoreRankGrade === '中' ? '#AD8B00' : '#36CFC9'
								}">
								{{ someitem.shopInfo.afsFactorScoreRankGrade }}
							</text>
						</view>
					</view>
				</view>
				<u-divider bg-color="transparent">商品详情</u-divider>
				<view class="details">
					<image v-for="(v, k) in info.detailImages" :key="k" :src="v" mode="widthFix" style="width: 100%;max-width: 100%;"></image>
				</view>
				<view class="navigation">
					<view class="left">
						<view class="item car" v-if="iscollection" @click="doDelCollection">
							<u-icon name="star" :size="40" color="#F9824E"></u-icon>
							<view class="text u-line-1" style="color: #F9824E;">已收藏</view>
						</view>
						<view class="item car" v-else @click="doCollection">
							<u-icon name="star" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">收藏</view>
						</view>
						<view class="item" @click="share">
							<u-icon name="zhuanfa" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">分享</view>
						</view>
					</view>
					<view class="right">
						<view class="buy btn u-m-r-38" @click="openmask">
							<view class="u-font-24" style="margin-top: -4rpx;">商品海报</view>
						</view>
						<view class="cart btn " @click="golink">
							<view class="u-font-24" style="margin-top: -4rpx;">去购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="maskshow">
			<view class="maskwarp">
				<view class="" style="display: inline-block;vertical-align: middle;">
					<view class="rect" @tap.stop v-show="canvasimg == ''">
						<view class="">
							<image :src="swiperList[0].url" mode="" style="width:590rpx;height: 590rpx;"></image>
						</view>
						<view class="u-flex u-row-between u-col-center" style="padding: 0 12rpx;">
							<view class="price">
								￥
								<text style="font-size: 32rpx;">{{ someitem.priceInfo.lowestCouponPrice }}</text>
								<text class="u-margin-left-10" style="color: #BFBFBF;">京东价</text>
								<text class="u-margin-left-10" style="text-decoration:line-through;color: #BFBFBF;">￥{{ someitem.priceInfo.price }}</text>
							</view>
							<view class="quanbox" v-if="someitem.couponInfo.couponList[0].discount">
								<text class="quan q1">￥ {{ someitem.couponInfo.couponList[0].discount }}</text>
								<text class="quan q2">券</text>
							</view>
						</view>
						<view class="title u-line-3">{{ someitem.skuName }}</view>
						<view class="u-flex u-row-between u-col-center" style="padding: 0 12rpx;">
							<view class="u-flex-1">
								<view class="comments">
									<text>{{ someitem.comments }} 评论</text>
									<text class="u-p-l-10">· {{ someitem.goodCommentsShare }}% 好评</text>
									<text class="u-p-l-10">· 京东自营</text>
								</view>
								<view class="userbox u-flex u-row-left u-col-center">
									<u-avatar :src="avatar" :size="102"></u-avatar>
									<view class="userinfo">
										<view class="titleu u-line-1">{{ username }}</view>
										<view class="tips">推荐您享受京东购物内部优惠</view>
									</view>
								</view>
							</view>
							<view class="mpcode">
								<!-- <u-avatar :src="qrcode" :size="126"></u-avatar> -->
								<image :src="qrcode" mode="" style="width: 126rpx;height: 126rpx;"></image>
								<view class="tips" style="text-align: center;">长按识别</view>
							</view>
						</view>
						<view class="close">
							<u-icon name="close-circle" color="#FFFFFF" :size="48" @click="maskshow = false"></u-icon>
						</view>
					</view>
					<view class="rect" v-show="canvasimg !== ''">
						<image :src="canvasimg" mode="" style="width: 100%;height: 100%;"></image>
						<view class="close">
							<u-icon name="close-circle" color="#FFFFFF" :size="48" @click="maskshow = false"></u-icon>
						</view>
					</view>
					<view class="btns">
						<view class="top btn">
							<view class="u-font-24" style="margin-top: 28rpx;" @click="dosave(canvasimg)">保存到手机相册</view>
						</view>
						<view class="bot btn">
							<view class="u-font-24" style="margin-top: 24rpx;" @click="preview">预览海报长按分享</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<canvas canvas-id="myCanvas" :style="{ width: 590 * scale + 'rpx', height: 922 * scale + 'rpx', backgroundColor: '#FFFFFF' }"
		 class="canvas-hide"></canvas>
		<u-toast ref="uToast"></u-toast>
		<u-action-sheet :list="sheetlist" v-model="sheetshow" @click="sheetindex"></u-action-sheet>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
		<u-modal v-model="isShow" content="您还未登录,登录后方可正常使用" :show-cancel-button="true" confirm-text="去登陆" confirm-color="#E76E4D"
		 @confirm="jumpLogin()"></u-modal>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '../../../js_sdk/gsq-image-tools/image-tools/index.js';
	export default {
		name: 'goodsinfo',
		data() {
			return {
				scale: 2,
				scrollTop: 0,
				canvasimg: '',
				maskshow: false,
				shareshow: false,
				skuId: '',
				current: 0,
				tagtext: '',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperList: [],
				info: {},
				someitem: {},
				goodsurl: '',
				avatar: uni.getStorageSync('jxuser').img ? uni.getStorageSync('jxuser').img : '',
				username: uni.getStorageSync('jxuser').user ? uni.getStorageSync('jxuser').user : '',
				iscollection: false,
				sheetlist: [{
						text: '分享海报（可锁粉）',
						color: '#101010',
						fontSize: 28,
						padding: '34rpx 0'
					},
					{
						text: '分享小程序（可锁粉）',
						color: '#101010',
						fontSize: 28,
						padding: '0',
						share: true
					}
				],
				sheetshow: false,
				qrcode: '',
				openId: '',
				code: '',
				flag: false,
				isLogin: false,
				isShow: false,
				my_code: uni.getStorageSync('jxuser') ? uni.getStorageSync('jxuser').my_code : '请先登录',
				openSettingBtnHidden: true,
			};
		},
		//实例创建完成后被立即调用
		created() {},
		watch: {
			current: function(val) {
				this.tagtext = val + 1 + '/' + this.swiperList.length;
			}
		},
		onPageScroll(obj) {
			// console.log(obj);
			this.scrollTop = obj.scrollTop;
		},
		onLoad(option) {
			console.log(option)
			this.isLogin = uni.getStorageSync('token') ? true : false;
			if (option.scene) {
				uni.setStorageSync('scene', true);
				const scene = decodeURIComponent(option.scene);
				let arr = scene.split('&');
				this.skuId = arr[0];
				uni.setStorageSync('invitecode', arr[1]);
				//海报进来读取商品
				this.skuId = arr[0];
				this.doSearchGoods();
			} else {
				if (option.item) {
					this.someitem = JSON.parse(decodeURIComponent(option.item));
					// console.log(this.someitem);
					this.swiperList = this.someitem.imageInfo.imageList;
					this.tagtext = 1 + '/' + this.swiperList.length;
					this.skuId = this.someitem.skuId;
					this.getgoodsdetail();
					this.doQueryCollection();

				} else {
					this.doSearchGoods();
				}
			}
		},
		//挂载开始之前被调用
		beforeMount() {},
		//  onPullDownRefresh() {
		//  //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		// console.log('refresh');
		// setTimeout(function() {
		// 	uni.stopPullDownRefresh(); //停止下拉刷新动画
		// }, 1000);
		//  },
		//初次渲染完成
		onReady() {},
		//全局只触发一次
		onLaunch() {},
		//从后台进入前台
		onShow() {
			this.isLogin = uni.getStorageSync('token') ? true : false;
			console.log(this.isLogin, 'show')
		},
		//前台进入后台
		onHide() {},
		onShareAppMessage(e) {
			return {
				title: this.someitem.skuName,
				path: '/pages/other/goodsInfo/goodsInfo?scene=' + encodeURIComponent(this.skuId + '&' + this.my_code),
				imageUrl: this.swiperList[0].url
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.someitem.skuName,
				query: {
					scene: +encodeURIComponent(this.skuId + '&' + this.my_code)
				},
				imageUrl: this.swiperList[0].url
			};
		},
		methods: {
			goback() {
				if (uni.getStorageSync('scene')) {
					uni.switchTab({
						url: '/pages/home/index'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			doSearchGoods() {
				this.$u.api
					.doSearchGoods({
						skuIds: this.skuId,
						fields: 'skuLabelInfo',
						user_id: uni.getStorageSync('jxuser').id ? uni.getStorageSync('jxuser').id : ''
					})
					.then(res => {
						this.someitem = res.data[0];
						this.swiperList = this.someitem.imageInfo.imageList;
						this.tagtext = 1 + '/' + this.swiperList.length;
						this.skuId = this.someitem.skuId;
						this.getgoodsdetail();
						this.doQueryCollection();
					})
					.catch(err => {
						console.log(err);
					});
			},
			jumpLogin() {
				uni.switchTab({
					url: '/pages/my/index'
				});
			},
			// //向后台更新信息
			updateUserInfo() {
				let _this = this;
				this.$u.api
					.doLogin({
						openId: this.openId
					})
					.then(res => {
						// console.log('登录成功', res);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('isloginout', true);
						uni.hideLoading();
						this.$refs.uToast.show({
							title: '登录成功!',
							type: 'success'
						});
						this.getUserInfo();
					})
					.catch(err => {
						console.log(err);
					});
			},
			getUserInfo() {
				this.$u.api
					.getUserInfo()
					.then(res => {
						// console.log(res);
						uni.setStorageSync('jxuser', res.data);
						this.avatar = res.data.img;
						this.doSearchGoods();
					})
					.catch(err => {
						console.log(err);
					});
			},
			preview(index, i) {
				console.log();
				uni.previewImage({
					urls: [this.canvasimg]
				});
			},
			getCreateQrCode() {
				if (this.canvasimg != '') {
					this.maskshow = true;
					return;
				}
				this.$u.api
					.getCreateQrCode({
						path: 'pages/other/goodsInfo/goodsInfo',
						sku_id: this.someitem.skuId,
						code: uni.getStorageSync('jxuser').my_code
					})
					.then(res => {
						console.log('小程序码', res);
						this.qrcode = res.data.code;
						const fs = wx.getFileSystemManager();
						var times = new Date().getTime();
						var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
						fs.writeFile({
							filePath: codeimg,
							data: this.qrcode.slice(22),
							encoding: 'base64',
							success: () => {
								this.qrcode = codeimg
							}
						});
						setTimeout(() => {
							this.makeimg(true);
						}, 300);
					})
					.catch(err => {
						conosle.log(err);
					});
			},
			sheetindex(index) {
				if (index === 0) {
					this.getCreateQrCode()
				} else {
					this.sheetshow = true;
				}
			},
			share() {
				if (!this.isLogin) {
					this.sheetshow = false;
					this.isShow = true;
					return;
				} else {
					this.sheetshow = true;
				}
			},
			doDelCollection() {
				this.$u.api
					.doDelCollection({
						skuId: this.skuId
					})
					.then(res => {
						console.log(res);
						this.$refs.uToast.show({
							title: '取消收藏!',
							type: 'success'
						});
						this.iscollection = false;
					})
					.catch(err => {
						console.log(err);
					});
			},
			doCollection() {
				if (!this.isLogin) {
					this.isShow = true;
					return;
				}
				this.$u.api
					.doCollection({
						skuId: this.skuId
					})
					.then(res => {
						console.log(res);
						this.$refs.uToast.show({
							title: '收藏成功!',
							type: 'success'
						});
						this.iscollection = true;
					})
					.catch(err => {
						console.log(err);
					});
			},
			doQueryCollection() {
				this.$u.api
					.doQueryCollection({
						skuId: this.skuId
					})
					.then(res => {
						console.log(res);
						this.iscollection = res.data.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			dosave(url) {
				var that = this;
				// #ifdef  MP
				console.log('-----', url);
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: "保存失败",
							icon: "none"
						});
					}
				});
				/* uni.getSetting({
					success(res) {
						
						/* uni.downloadFile({
							url: url,
							success: res => {
								if (res.statusCode === 200) {
									console.log('MP', res.tempFilePath, url);
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: res => {
											that.$refs.uToast.show({
												title: '保存成功',
												type: 'success'
											});
										},
										fail: err => {
											that.$refs.uToast.show({
												title: '保存失败',
												type: 'error'
											});
										}
									});
								}
							},
							fail: res => {
								that.$refs.uToast.show({
									title: '下载失败',
									type: 'error'
								});
							}
						}); 
					}
				}); */
				// #endif

				// #ifdef APP-PLUS
				uni.getImageInfo({
					src: url,
					success(image) {
						console.log('----app', image.path);
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: () => {
								// that.$refs.uToast.show({
								// 	title: '保存成功',
								// 	type: 'success'
								// });
							}
						});
					}
				});
				// #endif

				// #ifdef H5
				var canvas = document.createElement('canvas');
				var img = document.createElement('img');
				img.onload = function(e) {
					canvas.width = img.width;
					canvas.height = img.height;
					var context = canvas.getContext('2d');
					context.drawImage(img, 0, 0, img.width, img.height);
					canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
					canvas.toBlob(blob => {
						let link = document.createElement('a');
						link.href = window.URL.createObjectURL(blob);
						link.download = '';
						link.click();
					}, 'image/jpeg');
				};
				img.setAttribute('crossOrigin', 'Anonymous');
				img.src = url;

				// this.$refs.uToast.show({
				// 	title: '保存成功',
				// 	type: 'success'
				// });
				// #endif
			},
			makeimg(isshare) {
				//this.maskshow = true;
				let _this = this;
				// let phoneWith = this.phoneWith;
				// let scale = (phoneWith * 0.9) / 940;
				let scale = this.scale;
				// console.log(scale);

				/* uni.showLoading({
					mask: true,
					title: '生成中...'
				}); */
				// let oneurl = this.oneurl;
				// let base64 = this.base64;
				_this.downloadImages(_this.avatar, function(res) {
					_this.maskshow = true;
					console.log(1, res);
					let avatar = res;
					/* console.log(_this.swiperList[0].url)
					return; */
					_this.downloadImages(_this.swiperList[0].url, function(res) {
						let goodsimg = res;
						// _this.downloadImages(this.oneurl, function(res) {
						_this.drawPost(
							1,
							'myCanvas',
							295 * scale,
							461 * scale,
							[{
									type: 'image',
									url: goodsimg,
									x: 0,
									y: 0,
									width: 295 * scale,
									height: 295 * scale,
									isCircle: false
								},
								{
									type: 'text',
									text: '￥',
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 6 * scale,
									y: 320 * scale,
									color: '#f95d4e',
									size: 13 * scale,
									bold: false
								},
								{
									type: 'text',
									text: _this.someitem.priceInfo.lowestCouponPrice,
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 18 * scale,
									y: 320 * scale,
									color: '#f95d4e',
									size: 20 * scale,
									bold: true
								},
								{
									type: 'text',
									text: '京东价',
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 70 * scale,
									y: 320 * scale,
									color: '#BFBFBF',
									size: 12 * scale,
									bold: true
								},
								{
									type: 'text',
									text: '￥' + _this.someitem.priceInfo.price,
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 109 * scale,
									y: 320 * scale,
									color: '#BFBFBF',
									size: 12 * scale,
									bold: true
								},
								{
									type: 'line',
									width: 40 * scale,
									x: 108 * scale,
									y: 316 * scale,
									color: '#6A6A6A'
								},
								{
									type: 'text',
									text: _this.someitem.skuName,
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 5 * scale,
									y: 341 * scale,
									color: '#101010',
									size: 13 * scale,
									bold: true
								},
								{
									type: 'text',
									text: _this.someitem.comments + ' 评论',
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 5 * scale,
									y: 399 * scale,
									color: '#BFBFBF',
									size: 12 * scale,
									bold: true
								},
								{
									type: 'text',
									text: '·  ' + _this.someitem.goodCommentsShare + '% 好评  ·  京东自营',
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 76 * scale,
									y: 399 * scale,
									color: '#BFBFBF',
									size: 12 * scale,
									bold: true
								},
								{
									type: 'image',
									url: avatar,
									x: 6 * scale,
									y: 404 * scale,
									width: 52 * scale,
									height: 52 * scale,
									isCircle: true
								},
								{
									type: 'text',
									text: _this.username,
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 65 * scale,
									y: 422 * scale,
									color: '#101010',
									size: 13 * scale,
									bold: true
								},
								{
									type: 'text',
									text: '推荐您享受京东购物内部优惠',
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 65 * scale,
									y: 445 * scale,
									color: '#BFBFBF',
									size: 12 * scale,
									bold: true
								},
								{
									type: 'image',
									url: _this.qrcode,
									x: 220 * scale,
									y: 365 * scale,
									width: 73 * scale,
									height: 73 * scale,
									isCircle: false
								},
								{
									type: 'text',
									text: '长按识别',
									textAlign: 'left',
									lineAlign: 'TOP',
									x: 233 * scale,
									y: 450 * scale,
									color: '#BFBFBF',
									size: 12 * scale,
									bold: true
								}
							],
							data => {
								console.log('---1', data);
							}
						);
						if (_this.someitem.couponInfo && _this.someitem.couponInfo.couponList.length > 0) {
							_this.drawPost(2,
								'myCanvas',
								295 * scale,
								461 * scale,
								[{
										type: 'image',
										url: '/static/imgs/canvascou.png',
										x: 180 * scale,
										y: 300 * scale,
										width: 98 * scale,
										height: 24 * scale,
										isCircle: false
									},
									{
										type: 'text',
										text: '￥' + _this.someitem.couponInfo.couponList[0].discount,
										textAlign: 'left',
										lineAlign: 'TOP',
										x: 187 * scale,
										y: 317 * scale,
										color: '#f95d4e',
										size: 14 * scale,
										bold: true
									},
									{
										type: 'text',
										text: '券',
										textAlign: 'left',
										lineAlign: 'TOP',
										x: 255 * scale,
										y: 317 * scale,
										color: '#f95d4e',
										size: 14 * scale,
										bold: true
									}
								],
								data => {
									console.log('---2', data);
								}
							);
							// });
						}
					});
				});
			},
			// canvas绘画封装
			drawPost: function(type, id, width, height, options, callback) {
				const ctx = uni.createCanvasContext(id);
				ctx.setFillStyle('#FFFFFF');
				if (type == 1) {
					ctx.fillStyle = "#ffffff";
					ctx.fillRect(0, 0, 295 * this.scale, 461 * this.scale);
				}
				let that = this;
				// console.log('ctx', ctx);
				for (let i = 0; i < options.length; i++) {
					let setting = options[i];
					if (setting.type == 'image') {
						if (setting.isCircle) {
							let x = setting.x + setting.width / 2;
							let y = setting.y + setting.height / 2;
							let r = setting.height / 2;
							ctx.save();
							ctx.beginPath();
							ctx.arc(x, y, r, 0, 2 * Math.PI);
							ctx.clip();
							ctx.drawImage(setting.url, setting.x, setting.y, setting.width, setting.height);
							ctx.restore();
						} else {
							ctx.drawImage(setting.url, setting.x, setting.y, setting.width, setting.height);
						}
					} else if (setting.type == 'text') {
						let text = setting.text;
						ctx.setFontSize(setting.size);
						ctx.setFillStyle(setting.color);
						if (text.length > 22 && text.length <= 44) {
							let s_text = text.slice(0, 22);
							let e_text = text.slice(22, 44);
							ctx.fillText(s_text, setting.x, setting.y);
							ctx.fillText(e_text, setting.x, setting.y + 18 * this.scale);
							if (setting.bold) {
								for (let i = 0; i < 2; i++) {
									ctx.fillText(s_text, setting.x, setting.y);
									ctx.fillText(e_text, setting.x, setting.y + 18 * this.scale);
								}
							}
						} else if (text.length >= 45) {
							let s_text = text.slice(0, 22);
							let t_text = text.slice(22, 44);
							let e_text = text.slice(44, 67);
							ctx.fillText(s_text, setting.x, setting.y);
							ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
							ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
							if (setting.bold) {
								for (let i = 0; i < 2; i++) {
									ctx.fillText(s_text, setting.x, setting.y);
									ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
									ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
								}
							}
						} else if (text.length >= 67) {
							let s_text = text.slice(0, 22);
							let t_text = text.slice(22, 44);
							let e_text = text.slice(44, 63) + '...';
							ctx.fillText(s_text, setting.x, setting.y);
							ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
							ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
							if (setting.bold) {
								for (let i = 0; i < 2; i++) {
									ctx.fillText(s_text, setting.x, setting.y);
									ctx.fillText(t_text, setting.x, setting.y + 18 * this.scale);
									ctx.fillText(e_text, setting.x, setting.y + 38 * this.scale);
								}
							}
						} else {
							ctx.fillText(setting.text, setting.x, setting.y);
							if (setting.bold) {
								for (let i = 0; i < 2; i++) {
									ctx.fillText(setting.text, setting.x, setting.y);
								}
							}
						}
					} else if (setting.type == 'line') {
						ctx.setFillStyle(setting.color);
						ctx.setStrokeStyle(setting.color);
						ctx.moveTo(setting.x, setting.y);
						ctx.lineTo(setting.x + setting.width, setting.y);
						ctx.stroke();
					}
				}
				ctx.draw(true, function(e) {
					uni.hideLoading();
					setTimeout(() => {
						wx.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: 295 * that.scale,
							height: 461 * that.scale,
							fileType: 'jpg',
							quality: 1, //质量 (0,1]
							canvasId: 'myCanvas',
							success: function(res) {
								// 在H5平台下，tempFilePath 为 base64
								uni.showToast({
									title: '生成成功',
									icon: 'none'
								});
								that.canvasimg = res.tempFilePath;
								that.maskshow = true
							},
							fail: function(res) {
								console.log('fail', res);
								uni.hideLoading();
								uni.showToast({
									title: '海报生成失败',
									icon: 'none'
								});
							}
						});
					}, 200);
				});
			},
			// 缓存本地
			downloadImages: function(url, callback) {
				console.log('downloadImagesurl', url);
				uni.downloadFile({
					url: url,
					success: res => {
						console.log('downloadFile', res);
						if (res.statusCode === 200) {
							callback(res.tempFilePath);
						}
					},
					fail: res => {
						uni.hideLoading();
						app.errornet('生成失败');
					}
				});
			},
			openmask() {
				if (!this.isLogin) {
					this.isShow = true;
					return;
				}
				this.getCreateQrCode();
			},
			doChangeLink() {
				this.$u.api
					.doChangeLink({
						materialId: this.goodsUrl
						// couponUrl: this.couponUrl
					})
					.then(res => {
						// console.log(res);
						this.newurl = res.data.shortURL;
						let str = this.value;
						let index = str.indexOf('领券：http://coupon.m.jd.com');
						// console.log('index', index);
						str = str.slice(0, index);
						// console.log('str', str);
						str += '抢购：' + this.newurl;
						this.value = str;
						this.ischange = true;
					})
					.catch(err => {
						console.log(err);
					});
			},
			golink() {
				console.log('link', this.isLogin)
				if (!this.isLogin) {
					this.isShow = true;
					return;
				}
				this.$u.api
					.doChangeLink({
						// chainType: 1,
						materialId: this.someitem.materialUrl,
						couponUrl: this.someitem.couponInfo.couponList[0] ? this.someitem.couponInfo.couponList[0].link : ''
					})
					.then(res => {
						// console.log(res);
						let link = res.data.shortURL;
						// let link = res.data.clickURL;

						console.log('转链', link);
						// console.log('跳转链接', url);
						// uni.navigateToMiniProgram({
						// 	appId: 'wx91d27dbf599dff74',
						// 	path: url,
						// 	extraData: {},
						// 	success(res) {
						// 		// 打开成功
						// 		console.log('upToTap', res);
						// 	}
						// });
						//跳转京东购物 小程序 领券页面
						wx.navigateToMiniProgram({
							appId: 'wx91d27dbf599dff74',
							path: 'pages/union/proxy/proxy?spreadUrl=' + encodeURIComponent(link),
							envVersion: 'release',
							success(res) {
								// 打开成功
								console.log('打开成功');
							}
						});
					})
					.catch(err => {
						console.log(err);
					});
			},

			swiperchange(val) {
				// console.log(val.detail.current)
				this.current = val.detail.current;
			},
			getgoodsdetail() {
				this.$u.api
					.getGoodsDetail({
						skuIds: this.skuId
					})
					.then(res => {
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].detailImages = res.data[i].detailImages.split(',');
						}
						this.info = res.data[0];
						console.log('詳情', this.info);
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goodsinfo {
		position: relative;

		// background-color: $lt-bg;
		.navbar_top::v-deep {
			.u-icon__icon {
				width: 60rpx;
				height: 60rpx;
				// line-height: 68rpx;
				background-color: #909090;
				border-radius: 100rpx;
			}

			.uicon-nav-back:before {
				margin-left: 4rpx;
			}

			.uicon-zhuanfa:before {
				margin-left: 10rpx;
			}
		}

		.navbar-right {
			.icon_right {
				margin-right: 20rpx;
			}
		}

		.goodsmain {
			width: 100%;
			position: absolute;
			top: 0;
			// background-color: #ffffff;
			overflow: hidden;

			.swiper_top {
				position: relative;

				.swiper::v-deep {
					height: 712rpx !important;

					.swiper_item {
						height: 712rpx !important;
						width: 100% !important;
					}
				}

				.dots {
					position: absolute;
					right: 0;
					bottom: 30rpx;
					font-size: 28rpx;
				}

				.goplay {
					width: 140rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					left: 50%;
					bottom: 88rpx;
					// transform:translate(-50%,0);
					margin-left: -70rpx;
				}
			}

			.goods_info {
				width: 720rpx;
				margin: 0 auto;

				.goods_title {
					font-weight: 600;
					font-size: 26rpx;
					line-height: 50rpx;
				}

				.tprice {
					height: 57rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					overflow: hidden;
					white-space: nowrap;
					font-size: 24rpx;
					color: #787882;
					padding: 20rpx 0 10rpx 0;
					margin-bottom: 10rpx;
				}

				.couponinfo {
					padding: 20rpx 28rpx;
					margin: 20rpx 0;
					height: 124rpx;
					background-color: rgba(255, 81, 5, 0.2);
					border-radius: 12rpx;
					overflow: hidden;

					.cou_left {
						.title {
							color: #101010;
							font-size: 32rpx;
							font-weight: 600;
						}

						.timer {
							color: rgba(16, 16, 16, 0.43);
							font-size: 24rpx;
						}
					}

					.bevel {
						width: 36rpx;
						height: 127rpx;
						text-align: center;
						position: relative;
						display: flex;
						justify-content: center;

						.round {
							width: 36rpx;
							height: 36rpx;
							background-color: #ffffff;
							border-radius: 100rpx;
							position: absolute;
						}

						.r1 {
							top: -18rpx;
						}

						.r2 {
							bottom: -18rpx;
						}
					}

					.cou_right {
						.btnround {
							background-color: rgba(249, 130, 78, 0.67);
							border-radius: 100rpx;
							box-shadow: 0 4rpx 6rpx 0 rgba(249, 130, 78, 0.67);
							color: #ffffff;
							font-size: 26rpx;
							padding: 8rpx 20rpx;
						}
					}
				}

				.coupon {
					width: 100%;
					height: 116rpx;
					// background-color: #ff452d;
					background: url(../../../static/imgs/couponbg.png) no-repeat 100%;
					border-radius: 16rpx;
					padding: 20rpx 40rpx;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #ffffff;
					text-align: center;

					.coupon_left {
						font-size: 28rpx;
						font-weight: 600;
					}

					.coupon_right {
						font-weight: 600;
						border: 2rpx solid rgb(251, 251, 251);
						border-radius: 12rpx;
					}
				}

				.imgandtext {
					width: 100%;
					background-color: #ffffff;
					// height: 20rpx;
					text-align: center;
					margin-top: 28rpx;

					.img_top {
						color: #dfdfdf;
						margin: 0 auto;
						margin-bottom: 44rpx;
					}
				}

				.shopinfo {
					width: 100%;
					background-color: #ffffff;
					padding: 12px;
					margin-bottom: 12px;
					border-radius: 6px;

					.title {
						color: #000000;
						font-size: 28rpx;
						font-weight: 800;
					}

					.shop_bot {
						margin-top: 7rpx;

						.infos {
							margin-top: 8px;
							margin-right: 25rpx;
							font-size: 12px;
						}
					}
				}

				.details {
					margin: 20rpx auto;
					padding-bottom: calc(env(safe-area-inset-bottom) + 75rpx);

					image {
						display: flex;
						flex-direction: column;
					}
				}

				.navigation {
					width: 100%;
					position: fixed;
					left: 0;
					bottom: 0;
					// bottom: constant(safe-area-inset-bottom);
					// bottom: env(safe-area-inset-bottom);
					display: flex;
					justify-content: space-between;
					// margin-top: 100rpx;
					// border: solid 2rpx #f2f2f2;
					background-color: #ffffff;
					padding: 16rpx 20rpx;
					// padding-bottom: 0;
					padding-bottom: constant(safe-area-inset-bottom);
					padding-bottom: env(safe-area-inset-bottom);

					.left {
						display: flex;
						font-size: 20rpx;

						.item {
							margin: 0 30rpx;

							&.car {
								text-align: center;
								position: relative;

								.car-num {
									position: absolute;
									top: -10rpx;
									right: -10rpx;
								}
							}
						}
					}

					.right {
						display: flex;
						font-size: 28rpx;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 16rpx;

						.btn {
							width: 220rpx;
							height: 70rpx;
							line-height: 75rpx;
							// padding: 0 30rpx;
							text-align: center;
							border-radius: 40rpx;
							color: #ffffff;
						}

						.cart {
							background-color: #f95d4e;
							margin-right: 15rpx;
						}

						.buy {
							background-color: #fdaf8e;
							color: #621e00;
							margin-right: 15rpx;
						}
					}
				}
			}
		}

		.maskwarp {
			// margin: 25% 0;
			display: table-cell;
			width: 750rpx;
			height: 100vh;
			vertical-align: middle;
			text-align: center;

			.rect {
				width: 590rpx;
				height: 922rpx;
				background-color: #ffffff;
				margin: 25% auto 0;
				position: relative;

				.close {
					position: absolute;
					top: -50rpx;
					right: -50rpx;
				}

				.price {
					font-size: 24rpx;
					font-weight: 600;
					color: #f95d4e;
				}

				.title {
					height: 120rpx;
					color: #101010;
					font-size: 26rpx;
					font-weight: 600;
					padding: 15rpx 12rpx;
				}

				.quanbox {
					margin-top: 15rpx;

					.quan {
						background-color: #ffdccd;
						border-radius: 12rpx;
						padding: 10rpx 16rpx;
						color: #f95d4e;
					}

					.q1 {
						border-right: 2rpx dotted #ffffff;
					}
				}

				.comments {
					padding-left: 12rpx;
					color: rgba(16, 16, 16, 0.57);
					font-size: 24rpx;
				}

				.tips {
					color: rgba(16, 16, 16, 0.51);
					font-size: 24rpx;
				}

				.userbox {
					.userinfo {
						margin-left: 20rpx;
						overflow: hidden;

						.titleu {
							color: #101010;
							font-size: 26rpx;
							font-weight: 600;
							margin-bottom: 6rpx;
							text-align: left;
						}
					}
				}

				.mpcode {
					margin-top: -30rpx;
				}
			}

			.btns {
				width: 590rpx;
				margin: 0 auto;
				text-align: center;

				.btn {
					width: 590rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 100rpx;
					color: #ffffff;
					text-align: center;
				}

				.top {
					background-color: #fdaf8e;
					color: #621e00;
				}

				.bot {
					background-color: #f95d4e;
				}
			}
		}

		.canvas-hide {
			/* 1 */
			position: fixed;
			right: 100vw;
			bottom: 100vh;
			/* 2 */
			z-index: -9999;
			/* 3 */
			opacity: 0;
		}

		.warp {
			position: relative;

			.rect {
				position: absolute;
				top: 102rpx;
				right: 30rpx;

				.icons {
					margin-left: 72rpx;
					transform: rotate(-45deg);
				}
			}
		}
	}
</style>
